<template>
	<div style="background-color: #f4fafe;overflow: hidden;min-height: 100vh;">
		<!-- 顶部按钮 -->
		<div class="btn_group">
			<!-- 搜索框 -->
			<div class="dataSearch">
				
			</div>
			<div>
				<el-button icon="el-icon-plus" round @click="dialogVisible=true" style="background-color: #03d3bd;color: white;border: none;">创建课程</el-button>
			</div>
		</div>
		<el-dialog title="创建课程" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
			
			
			<div class="course-cover-uploader">
				<div class="el-upload el-upload--text">
					<img :src="dialogImageUrl" />
					<el-upload
					 :show-file-list="false"
					 accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
					 action="http://101.43.71.61:8080/minio/upload"
					 :on-success="success"
					 :headers="myHeader"
					 >
					<el-button type="primary"  style="height: 2.6rem;text-align: center;margin-top: 1.875rem;background-color:  #03d3bd;border: none;">上传封面</el-button>
				    </el-upload>
				</div>
			</div>
			<el-input v-model="input" placeholder="课堂名称" class="input"></el-input>
			<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 9}" placeholder="课程简称" v-model="textarea2" class="input">
			</el-input>
			<div style="margin-top: 1.25rem;">
				<el-radio v-model="radio" label="1">不自动生成单元</el-radio>
				<el-radio v-model="radio" label="2">按照周，课时自动生成课程单元</el-radio>
			</div>
			
			<div style="margin-top: 1.25rem;" v-if="radio==2">
				<div>周数：<el-input v-model="chapterNumber"></el-input>
				</div>
				<div>每周课时数：<el-input v-model="periodNumber"></el-input>
				</div>
			</div>


			

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="CreatCourse()" style="background-color:  #03d3bd;border: none;">确 定</el-button>
			</span>
		</el-dialog>
		<div style="width: 95%;overflow: hidden;margin: 0 auto;">
			<el-row :gutter="20">
				<el-col :span="6" v-for="Item in CourseByTeacherList" :key="Item.id">
					<div class="grid-content" @click="CourseCenter(Item.id)">
						<div class="live-course-thumb">
							<img :src="Item.courseImg"/>
						</div>
						<div class="live-course-body">
							<div class="live-course-title">{{Item.courseName}}</div>
							<!-- <div class="live-course-info">黄伟</div> -->
						</div>
					</div>
				</el-col>
			</el-row>

		</div>
	</div>
</template>

<script>
	import {
		HttpManager
	} from "../../request/Teacher.js"
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				dialogVisible: false,
				textarea2: '',
				input: '',
				radio: '',
				periodNumber: 1,
				chapterNumber: 1,
				CourseByTeacherList: [],
				dialogImageUrl:"https://cdnoss.kaoshixing.com/ksx_prod/367700/file/sign/20211126/-1770398744.jpg",
			    myHeader: {
			    	token: window.localStorage.getItem("token")
			    },
				img:"https://cdnoss.kaoshixing.com/ksx_prod/367700/file/sign/20211126/-1770398744.jpg"
			}
		},
		created() {
			this.getCourseByTeacher();
		},
		methods: {
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
			
			},
			//路径跳转
			CourseCenter(id) {
				window.localStorage.setItem('ClassId', id);
				this.$router.push({
					path: "/CourseCenter"
				});
			},
			//创建课程
			CreatCourse() {
				this.dialogVisible = false;
				var parmas = {
					"courseDescribe": this.textarea2,
					"courseImg": this.dialogImageUrl,
					"courseName": this.input
				};
				HttpManager.CreatCourse(parmas, this.chapterNumber, this.periodNumber).then(e => {
					console.log(e);
					this.$message({
						message: '课程创建，成功!!',
						type: 'success'
					});
					this.getCourseByTeacher();
				})

			},
			//获取课程列表
			getCourseByTeacher() {
				HttpManager.getCourseByTeacher().then(e => {
					this.CourseByTeacherList = e.data.data;
					
				})
			},
			handleClose() {
             this.dialogVisible = false;
			},
			//图片上传成功
			success(response, file, fileList) {
			 console.log(response);
			 this.dialogImageUrl=response.data.url;
			},


		}
	}
</script>

<style scoped="scoped" lang="scss">
	.input {
		margin-top: 1.25rem;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		width: 95%;
		margin: 0 auto;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		// margin-left: 0.625rem;

		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #181e33;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #03d3bd;
				}

				&:focus {
					border-color: #03d3bd;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #fff;
				}
			}
		}
	}

	.grid-content {
		width: 98%;
		height: 273px;
		display: flex;
		cursor: pointer;
		flex-direction: column;
		// border-radius: 8px;
		margin-left: 1%;
		margin-right: 1%;
		margin-top: 1.25rem;
	}
	.live-course-thumb img{
		width: 100%;
		height: 100%;
		// border-radius: 8px 8px 0 0;
		transition: all .5s;
	}
	
	.live-course-thumb {
		width: 100%;
		height: 198px;
		// border-radius: 8px 8px 0 0;
		overflow: hidden;
	}
	
	.live-course-body {
		box-sizing: border-box;
		width: 100%;
		height: 75px;
		background-color: #fff;
		border-radius: 0 0 8px 8px;
		padding: 15px 15px 15px 10px;
	}
	
	.live-course-title {
		width: 100%;
		height: 16px;
		float: left;
		font-size: 16px;
		font-weight: 600;
		color: #333;
		line-height: 16px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 9px;
	}
	
	.live-course-info {
		width: 100%;
		height: 20px;
		float: left;
		display: flex;
		align-items: center;
		color: #cfcfcf;
	}

	.course-add .el-form.base-form .course-cover-uploader,
	.course-add .el-form.exercise-form .course-cover-uploader {
		width: 400px;
		height: 120px;
		border-radius: 4px;
		background-image: url(https://s6.kaoshixing.com/static/vue/images/base/course-icon-picture.png?v=a69cd2a664);
		background-repeat: no-repeat;
		background-size: cover;
		// position: relative;
	}

	.el-upload {
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}

	.course-cover-uploader img,
	.course-add .el-form.exercise-form .course-cover-uploader img {
		width: 70%;
		height: 100px;
		// position: absolute;
		// left: 0;
		// top: 0;
	}
	
</style>
